From 70b4f633a6fbedb58c8b9134ac64ede854d489de Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 20 Nov 2023 12:27:46 +0100 Subject: refactor(components): replace PageLayout template with Page * split pages in smaller components (it is both easier to maintain and more readable, we avoid the use of fragments in pages directory) * extract breadcrumbs from article tag (the navigation is not related to the page contents) * remove useReadingTime hook * remove layout options except `isHome` --- src/pages/sujet/[slug].tsx | 153 +++++++++++++++++---------------------------- 1 file changed, 58 insertions(+), 95 deletions(-) (limited to 'src/pages/sujet/[slug].tsx') diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx index d9734a3..30adec3 100644 --- a/src/pages/sujet/[slug].tsx +++ b/src/pages/sujet/[slug].tsx @@ -10,11 +10,12 @@ import { getLayout, Heading, LinksWidget, - PageLayout, PostsList, - Time, - MetaList, - MetaItem, + Page, + PageHeader, + PageSidebar, + TocWidget, + PageBody, } from '../../components'; import { getAllTopicsSlugs, @@ -35,7 +36,7 @@ import { getWebPageSchema, } from '../../utils/helpers'; import { loadTranslation, type Messages } from '../../utils/helpers/server'; -import { useBreadcrumb } from '../../utils/hooks'; +import { useBreadcrumb, useHeadingsTree } from '../../utils/hooks'; export type TopicPageProps = { currentTopic: Topic; @@ -61,6 +62,7 @@ const TopicPage: NextPageWithLayout = ({ title, url: `${ROUTES.TOPICS}/${slug}`, }); + const { ref, tree } = useHeadingsTree({ fromLevel: 2 }); const { asPath } = useRouter(); const webpageSchema = getWebPageSchema({ @@ -101,9 +103,14 @@ const TopicPage: NextPageWithLayout = ({ ); const pageUrl = `${CONFIG.url}${asPath}`; + const tocTitle = intl.formatMessage({ + defaultMessage: 'Table of Contents', + description: 'PageLayout: table of contents title', + id: 'eys2uX', + }); return ( - <> + {seo.title} {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */} @@ -121,92 +128,29 @@ const TopicPage: NextPageWithLayout = ({ // eslint-disable-next-line react/no-danger -- Necessary for schema dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} /> - + - } - /> - {dates.update ? ( - } - /> - ) : null} - {officialWebsite ? ( - - ) : null} - {articles ? ( - - ) : null} - - } - widgets={ - thematics - ? [ - - {thematicsListTitle} - - } - items={getLinksItemData(thematics)} - // eslint-disable-next-line react/jsx-no-literals -- Key allowed - key="related-thematics" - />, - - {topicsListTitle} - - } - items={getLinksItemData(topics)} - // eslint-disable-next-line react/jsx-no-literals -- Key allowed - key="topics" - />, - ] - : [] - } - > + meta={{ + publicationDate: dates.publication, + total: articles?.length, + updateDate: dates.update, + website: officialWebsite, + }} + /> + + {tocTitle}} + tree={tree} + /> + + {/*eslint-disable-next-line react/no-danger -- Necessary for content*/} {content ?
: null} {articles ? ( @@ -229,13 +173,32 @@ const TopicPage: NextPageWithLayout = ({ /> ) : null} - - + + + {thematics ? ( + + {thematicsListTitle} + + } + items={getLinksItemData(thematics)} + /> + ) : null} + + {topicsListTitle} + + } + items={getLinksItemData(topics)} + /> + + ); }; -TopicPage.getLayout = (page) => - getLayout(page, { useGrid: true, withExtraPadding: true }); +TopicPage.getLayout = (page) => getLayout(page); type TopicParams = { slug: string; -- cgit v1.2.3